const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const data = require("./src/mock");
// 引入vue
// const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
    entry: './src/index.js', //入口
    output: { //出口
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true, //清理
    },
    mode: 'development',
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        // new VueLoaderPlugin(),
        new MiniCssExtractPlugin()
    ],
    module: {
        rules: [{
                test: /\.html$/,
                use: 'html-loader'
            },
            {
                // npm install --save-dev style-loader css-loader
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                // npm install --save-dev style-loader css-loader
                test: /\.s(a|c)ss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },
            {
                // npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env --save-dev
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                // npm install file-loader --save-dev
                test: /\.(png|gif|jpeg|svg)$/,
                use: [{
                    loader: 'file-loader',
                    options: {}
                }]
            },
            {
                // npm install file-loader --save-dev
                test: /\.(eot|ttf|woff|woff2)$/,
                use: [{
                    loader: 'file-loader',
                    options: {}
                }]
            },
            // {
            //     // npm install -D vue-loader vue-template-compiler
            //     // 需要在 plugins 里添加配置: new VueLoaderPlugin()
            //     test: /\.vue$/,
            //     loader: ['vue-loader']
            // }
           
        ]
    },
    resolve: {
        // 重命名
        alias: {
            xyz$: path.resolve(__dirname, 'src/index.js'),
        },
        // 后缀名
        extensions: [".js", ".json"]
    },
    devServer: {
        host: 'localhost',
        port: 8080,
        hot: true,
        compress: true,
        open: true,
        before(app){
            app.get('/list', function(req, res) {
              res.json(data);
            });
        }
    }

}